<template>
  <div class="search-container">
    <h1 class="platform-title">体育与艺术用品招标采购平台</h1>
    <div class="search-box">
      <el-input
        v-model="searchText"
        placeholder="请输入关键词搜索，多关键词用空格分隔，如体育篮球"
        class="search-input"
        clearable
      >
      </el-input>
      <el-button type="primary" class="search-button" @click="handleSearch">检索</el-button>
    </div>
    <div class="search-options">
      <span>热门搜索：</span>
      <a href="#" class="search-tag">体育</a>
      <a href="#" class="search-tag">艺术</a>
      <a href="#" class="search-tag">招标</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    handleSearch() {
      // Implement search functionality
      console.log('Searching for:', this.searchText)
      this.$emit('search', this.searchText)
    }
  }
}
</script>

<style scoped>
.search-container {
  background-color: #505b6b;
  padding: 30px 0;
  color: white;
  text-align: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><text x="20%" y="30%" opacity="0.1" font-family="Arial" font-size="30" fill="white">招标采购</text></svg>');
}

.platform-title {
  font-size: 28px;
  margin-bottom: 30px;
}

.search-box {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
}

.search-input {
  flex-grow: 1;
}

.search-button {
  margin-left: 10px;
}

.search-options {
  margin-top: 15px;
  font-size: 14px;
}

.search-tag {
  color: white;
  margin: 0 5px;
  text-decoration: none;
}

.search-tag:hover {
  color: #e6e6e6;
  text-decoration: underline;
}
</style>
